<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta charset="utf-8">

		<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
		Remove this if you use the .htaccess -->
		<meta name="viewport" content="width=device-width; initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="renderer" content="webkit">
		<!-- 360高速模式-->
		<meta name="description" content="bootstrap基本模板">
		<meta name="author" content="chengt01">
		<meta name="keywords" content="bootstrap,html5,css3">
		<title>index</title>
		<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css"/>
		<link rel="stylesheet" href="../styles/site.css"/>
		<!--[if lt IE 9]>
		<script src="scripts/html5.min.js"></script>
		<script src="scripts/respond.min.js"></script>
		<![endif]-->
	</head>

	<body class="container">
		<!-- <nav class="navbar navbar-inverse">
		<div class="container-fluid">
		<div class="navbar-header">
		<div class="navbar-brand">
		Day01
		</div>
		</div>
		<button data-target="#divNav1" data-toggle="collapse" class="navbar-toggle">
		<span class="icon-bar"></span>
		<span class="icon-bar"></span>
		<span class="icon-bar"></span>
		</button>
		</div>
		<div id="divNav1" class="collapse navbar-collapse">
		<ul class="nav navbar-nav">
		<li>
		<a href="#">Home</a>
		</li>
		<li>
		<a href="#">About</a>
		</li>
		</ul>
		</div>
		</nav> -->
		<header class="page-header visible-sm visible-md">
			<h1>index<small>Day01</small></h1>
		</header>

		<div class="row">
			<div class="col-sm-3">
				<label class="glyphicon glyphicon-home"></label> 左侧边栏
				<div>
					<ul class="list-group">
						<li class="list-group-item">
							<a href="#">Link</a>
						</li>
						<li class="list-group-item">
							<a href="#">Link</a>
						</li>
						<li class="list-group-item">
							<a href="#">Link</a>
						</li>
						<li class="list-group-item">
							<a href="#">Link</a>
						</li>
						<li class="list-group-item">
							<a href="#">Link</a>
						</li>
					</ul>
				</div>
			</div>
			<div class="col-sm-7">
				<blockquote>
					<h3>正文区域</h3>
					<footer>
						来自
						<code>
							bootstrap
						</code>
						样式
					</footer>
				</blockquote>
				<div class="jumbotron">
					<h2>网站来之Bootstrap框架</h2>
					<a class="btn btn-primary pull-right" href="#">了解更多</a>
					<label for="name">aa</label>
					<input id="name" type="text" placeholder="aaaa" />
					<button id="btn" class="btn btn-success">
						Show
					</button>
					<div class="clear"></div>
				</div>
				<div >
					<div class="row">
						<div class="col-sm-8 col-sm-offset-2">
							CELL
						</div>
					</div>
				</div>
				<table class="table table-hover table-striped table-condensed">
					<!-- condensed:表格压缩  striped:斑马线 hover:鼠标悬停 -->
					<tr>
						<td>ID</td>
						<td>TITLE</td>
						<td>AUTHOER</td>
						<td>PRICE</td>
						<td>PUBDATE</td>
					</tr>
					<tr>
						<td>1</td>
						<td>西游记</td>
						<td>吴承恩</td>
						<td>10.99</td>
						<td>2010-01-01</td>
					</tr>
					<tr>
						<td>2</td>
						<td>三国演义</td>
						<td>罗贯中</td>
						<td>20.99</td>
						<td>2010-02-02</td>
					</tr>

				</table>
			</div>
			<div class="col-sm-2">
				<label>右侧边栏</label>
			</div>
		</div>

		<footer class="navbar-fixed-bottom label-info text-center">
			<p>
				Copyright  &copy;
				<abbr title="tarnna">hajiang</abbr>&trade; 2015
			</p>
		</footer>
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
		<script type="text/javascript" src="../bootstrap/js/bootstrap.js"></script>
		<script>
			$(function() {
				$('#btn').click(function() {
					$('.page-header').append("<h3>").html("hello");
				});
			});
		</script>
	</body>
</html>
